<template>
  <div class="app-container" v-loading="loading.getPageList">
    <div>
      <el-button type="primary" size="small" @click="save">保存</el-button>
      <el-button type="primary" size="small" @click="preview()">
        预览
      </el-button>
       <el-button
          style="float: right; padding: 3px 0; margin-right: 10px"
          type="text"
          @click="$router.push({ path: '/workflowDesign/formList' })"
          >返回</el-button
        >
    </div>
    <br />
    <editPanel ref="editPanel"></editPanel>
    <previewForm ref="previewForm"></previewForm>
    <editForm ref="editForm"></editForm>
  </div>
</template>

<script>
import TableIndex from "@/layout/mixin/TableIndex";
import editPanel from "./components/editPanel";
import previewForm from "./previewForm";
import editForm from "./editForm";
export default {
  components: {
    editPanel,
    editForm,
    previewForm,
  },
  mixins: [TableIndex],
  data() {
    return {
      moduleName: "dynamicFormDesign",
      form: {},
    }},
  computed: {
    id() {
      return { id: this.$route.query.id, version: Number(this.$route.query.version||1) };
    },
  },
  mounted() {
    this.getDesign(this.id);
  },
  methods: {
    preview() {
      this.$refs.previewForm.show({
        controls: JSON.parse(JSON.stringify(this.$refs.editPanel.getControls())),
        value: this.$refs.editPanel.getValue(),
      });
    },
    save() {
      this.form.designContent = JSON.stringify(this.$refs.editPanel.getControls());
      this.$refs.editForm.show(this.form);
    },
    getDesign(id) {
      this.form.formDesignId = JSON.parse(JSON.stringify(id));
      this.$store
        .dispatch("dynamicFormDesign/getFormDesignVersion", id)
        .then((res) => {
          if (res && res.designContent)
            this.$refs.editPanel.setControls(JSON.parse(res && res.designContent))
        });
    },
  },
};
</script>

<style lang="scss">

</style>
